<script setup>
import http from "@/http";
import {useStore} from "vuex";
import MenuChild from "@/views/MenuChild.vue";
import {useRouter} from "vue-router";

const arr = ref([])

const menus = ref([])

onBeforeMount(() => {
  http.post("/LinkShow/FristMenu").then((res) => {
    arr.value = res.data
  })

  http.post("/LinkShow/ZuoCheMenu", {menuId: 4}).then((res) => {
    menus.value = res.data[0].chillist
  })
})

const index = ref(0)

import {computed, onBeforeMount, reactive, ref} from 'vue'
import PersonalCenter from "@/views/PersonalCenter.vue";
import CustomerSeasView from "@/views/CustomerSeasView.vue";
import StatisticsSeas from "@/views/StatisticsSeas.vue";
import {View} from "@element-plus/icons-vue";

const store = useStore();

const user = computed(() => JSON.parse(store.state.user))

const menuChange = (l) => {
  http.post("/LinkShow/ZuoCheMenu", {menuId: l}).then((res) => {
    console.log(res.data[0].chillist)
    menus.value = res.data[0].chillist
  })
}
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

const router = useRouter()
//  退出登录
const logout = ref(false)
const loginout = () => {
  router.push('/')
}

const pushMeCenter = () => {
  router.push('/linkhotai/personalCenter')
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="head">
          <!--图标-->
          <div style="display: inline-block;position:absolute;top: 8px">
            <img src="../assets/LinkIcon1.png" width="40px" height="40px">
            <span style="font-size: 16px;font-weight: bold;color: white;position: absolute;top: 10px">LinkWeChat</span>
          </div>

          <!-- 中间导航 一级菜单-->
          <div style="display: inline-block;position: absolute;left: 180px">
            <ul class="ul1">
              <li class="li2" @mousemove="index=i" :class="{li1:index==i}" v-for="(l,i) in arr" :key="l.name"
                  @click="menuChange(l.menuId)">
                <div style="margin-top: 18px">
                  {{ l.menuName }}
                </div>
              </li>
            </ul>
          </div>

          <!--  头像设置   -->
          <el-dropdown class="block" :hide-on-click="false"
                       style="position: absolute;right: 40px;top: 13px;width: 45px;">
            <span>
               <el-avatar shape="square" :size="30" :src="user.avatar"/>
            <el-icon color="white" size="15" style="position: absolute;top: 6px;margin-left: 8px">
              <CaretBottom/>
            </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="pushMeCenter">个人中心</el-dropdown-item>
                <el-dropdown-item divided @click="logout=true">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>

      </el-header>
      <el-container>
        <aside class="aside">
          <el-menu :router="true" default-active="2" class="el-menu-vertical-demo" :collapse="store.state.isCollpace"
                   @open="handleOpen" @close="handleClose">
            <MenuChild :menus="menus"></MenuChild>
          </el-menu>
        </aside>
        <el-main>

          <router-view></router-view>
          <!--          <StatisticsSeas></StatisticsSeas>-->
        </el-main>
      </el-container>
    </el-container>
  </div>

  <!--  退出登录对话框-->
  <el-dialog v-model="logout" title="系统提示" width="400" style="height: 160px;margin-top: 240px;font-weight: bold">
    <div style="font-weight: lighter; margin-top: 12px">
      <el-icon size="24px" color="#e4b53d" style="vertical-align: -5px;">
        <WarningFilled/>
      </el-icon>
      确定要退出登录吗?
    </div>
    <template #footer>
      <div class="dialog-footer" style="margin-top: 6px">
        <el-button @click="logout = false">取消</el-button>
        <el-button type="primary" @click="loginout">确定</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped lang="scss">
.el-header {
  width: 100%;
  height: 55px;
  background-color: dodgerblue;
}

.aside {
  height: 120vh;
  background-color: white;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  border-radius: 20px;
}

.ul1 {
  list-style: none;
  display: inline-block;
}

.li2 {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 50px;
  font-size: 16px;
  font-family: 楷体;
  margin-left: 5px;
  color: white;
}

.li1 {
  border-bottom: 3px solid white;
}

.demo-basic {
  text-align: center;
}

.demo-basic .sub-title {
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-basic .block:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.demo-basic .block {
  flex: 1;
}

.demo-basic .el-col:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  min-height: 100%;
  border: 0px;
  border-radius: 20px;
}

</style>